<!--svga预览-->
<template>
  <div style="display: flex;flex-direction: column;margin: 32px 16px">
   <alert>目前预览功能只在pc软件中实现，通过网盘获取</alert><Button type="text" icon="md-link" ghost class="back-page" @click="openContact">获取pc软件</Button>
    <div style="flex-grow: 1;padding: 24px 32px">
      <Card style="display: flex;justify-content: center;align-items: center" dis-hover>
        <div id="svgaCanvas" style="width: 300px;height: 500px;">

        </div>
      </Card>
    </div>

  </div>



</template>

<script setup>
import SVGA from 'svgaplayerweb'
import {onMounted, ref} from 'vue'


function createSVGA(svgaUrl) {
  let player = new SVGA.Player('#svgaCanvas')
  let parser = new SVGA.Parser('#svgaCanvas')
  parser.load(
      svgaUrl || 'img/test.svga',
      function (videoItem) {
        player.setVideoItem(videoItem)
        player.startAnimation()
      },
      (err) => {
        console.error(err)
      }
  )
}

onMounted(() => {
  createSVGA()
})

const svgaPath = ref('')

async function selectSvgaPath() {
  const selectPath = await myApi.handleSelectPath({
    title: '选择svga文件',
    properties: ['openFile']
  })
  if(selectPath){
    svgaPath.value = selectPath
    const fileBuffer = await myApi.handleReadByFilePath({
      filePath: selectPath,
    })
    const blob = new Blob([fileBuffer.fileData], {type: ''})
    // 将Blob对象转换为URL，然后在浏览器中显示图片
    const objectUrl = URL.createObjectURL(blob)
    createSVGA(objectUrl)
  }

}
import router from "@/router";
function openContact(){
  router.push('qrcode_contact')
}

</script>

<style scoped>
.back-page{
  color: #00AEAD;
  font-weight: bold;
}
.back-page:hover{
  color: #1a5cd7;
}
</style>
